<!DOCTYPE html >
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"></meta>
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"></meta>
    <title></title>
    <meta charset="UTF-8">
    <style type="text/css">
        * {margin:0;padding:0;overflow:hidden;}
        ul {
            list-style-type:disc;
            overflow:hidden;
        }
        #scroll {
            display:inline-block;
            position:absolute;
            height:100%;
            left:0px;
        }
        .div_wrap {
            display:inline-block;
            height:100%;
            float:left;
        }
        img {
            width:100%;
            height:90%;
        }
        li p {
            text-align:center;
        }
    </style>
    
    <script type="text/javascript" src="js/jquery-3.2.0.min.js"></script>
    <script type="text/javascript">
    var scrollWidget = {
        ul : null,
        isMouseDowning:false,
        downX:0,
        downY:0,
        init:function() {
            this.ul = document.getElementById("scroll");
            this.ul.style.left = "0px";
            this.updateScroll();
            this.ul.addEventListener("mousedown", this.mousedown, false);
            this.ul.addEventListener("mousemove", this.mousemove, false);
            this.ul.addEventListener("mouseup", this.mouseup, false);
        },
        updateScroll:function() {
            var wrapper = $(".div_wrap");
            for (var index = 0; index < wrapper.length; index++) {
                $(wrapper[index]).css("width", $(window).width());
            }
            $("#scroll").width(wrapper.length * $(window).width());
        },
        resize:function() {
            scrollWidget.updateScroll();
        },
        mousedown:function(e) {
            e.preventDefault();
            this.isMouseDowning = true;
            this.downX = e.pageX;
            this.downY = e.pageY;
            console.log("mousedown");
        },
        mousemove:function(e) {
            e.preventDefault();
            if (this.isMouseDowning) {
                var deltaX = e.pageX - this.downX;
                this.downX = e.pageX;
                var ul = scrollWidget.ul;
                var li = ul.children[0];
                var scrollLeft = parseInt(ul.style.left);
                var ulwidth = parseInt(ul.style.width);
                var liwidth = parseInt(li.style.width);
                var maxScroll = -(ulwidth - liwidth);
                //console.log("deltaX : " + deltaX + " , scrollLeft : " + scrollLeft + " , ulwidth : " + ulwidth + " , liwidth : " + liwidth + " , maxScroll : " + maxScroll);
                if (scrollLeft + deltaX <= 0 && scrollLeft + deltaX > maxScroll) {
                    ul.style.left = (scrollLeft + deltaX) + "px";
                }
                ul.style.left =  + "px";
                //console.log("ul.style.left : " + ul.style.left);
            }
        },
        mouseup:function(e) {
            e.preventDefault();
            this.isMouseDowning = false;
            console.log("mouseup");
            var ul = scrollWidget.ul;
            var li = ul.children[0];
            var ulwidth = parseInt(ul.style.width);
            var liwidth = parseInt(li.style.width);
            var scrollLeft = Math.abs(parseInt(ul.style.left));
            var index = (scrollLeft / liwidth).toFixed();
            console.log("index : " + index);
            scrollWidget.snapToIndex(index);
        },
        snapToIndex:function(index) {
            var ss = 10;
            var ul = scrollWidget.ul;
            var li = ul.children[0];
            var ulwidth = parseInt(ul.style.width);
            var liwidth = parseInt(li.style.width);
            var scrollLeft = parseInt(ul.style.left);
            var scrollTo = -(index * liwidth);
            var step = (scrollTo - scrollLeft) / ss;
            console.log(step);
            var times = 1;
            var t = setInterval(function(){
                ul.style.left = (parseInt(ul.style.left) + step) + "px";
                if (times == ss - 2) {
                    ul.style.left = scrollTo + "px";
                    clearInterval(t);
                }
                times++;
            }, 20);
        }
    }
    window.onload = function() {
        scrollWidget.init();
    };
    window.onmouseout = function () {
        var evt = document.createEvent('Event'); 
        evt.initEvent('mouseup',true,true); 
        scrollWidget.ul.dispatchEvent(evt); 
        console.log("onmouseout");
    };
    window.onresize = scrollWidget.resize;
    </script>
</head>
<body>
    <ul id="scroll">
        <li class="div_wrap">
            <img src="http://139.129.252.104:8086/images/527/644/83EA13D7AE36645E2FEBF2ACF70FD4AE/83EA13D7AE36645E2FEBF2ACF70FD4AE.jpg"></img>
            <p id="extra_title">第一张</p>
        </li>
        <li class="div_wrap">
            <img src="http://139.129.252.104:8086/images/721/515/B4780CB6C5CA42314AB170B9F3C88A5C/B4780CB6C5CA42314AB170B9F3C88A5C.jpg"></img>
            <p id="extra_title">第二张</p>
        </li>
        <li class="div_wrap">
            <img src="http://139.129.252.104:8086/images/721/515/B4780CB6C5CA42314AB170B9F3C88A5C/B4780CB6C5CA42314AB170B9F3C88A5C.jpg"></img>
            <p id="extra_title">第三张</p>
        </li>
        <li class="div_wrap">
            <img src="http://139.129.252.104:8086/images/527/644/83EA13D7AE36645E2FEBF2ACF70FD4AE/83EA13D7AE36645E2FEBF2ACF70FD4AE.jpg"></img>
            <p id="extra_title">第四张</p>
        </li>
        <li class="div_wrap">
            <img src="http://139.129.252.104:8086/images/721/515/B4780CB6C5CA42314AB170B9F3C88A5C/B4780CB6C5CA42314AB170B9F3C88A5C.jpg"></img>
            <p id="extra_title">第五张</p>
        </li>
        <li class="div_wrap">
            <img src="http://139.129.252.104:8086/images/721/515/B4780CB6C5CA42314AB170B9F3C88A5C/B4780CB6C5CA42314AB170B9F3C88A5C.jpg"></img>
            <p id="extra_title">第六张</p>
        </li>
    </ul>
</body>
</html>